import React, { Component } from 'react'
import Form from '../Form'

class DataModal extends Component {

  static propTypes = {
    type: React.PropTypes.string.isRequired,
    columns: React.PropTypes.array.isRequired,
    data: React.PropTypes.object,
    onConfirm: React.PropTypes.func,
    onInit: React.PropTypes.func,
  }

  getModalContent () {
    let Element
    let type = this.props.type
    if (this.props.onInit) {
      Element = this.props.onInit(type)
      if (Element) {
        return Element
      }
    }

    if (type === 'delete') {
      Element = <p>确认删除该条数据？</p>
    } else {
      Element = <Form onChange={this.props.onChange} columns={this.props.columns} data={this.props.data} />
    }

    return Element
  }

  render() {

    return (
      <div id="__dataModal" className="modal fade" tabIndex="-1" role="dialog" data-backdrop="static">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title">{'delete' === this.props.type ? '删除' : '编辑'}</h4>
            </div>
            <div className="modal-body">
              <div id="__dataModalMessageArea" className="alert alert-danger hide">信息提交失败</div>
              {this.getModalContent()}
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="button" id="__dataModalSubmitButton" className="btn btn-primary" onClick={this.props.onConfirm}>确认</button>
            </div>
          </div>
        </div>
      </div>)

  }

}

export default DataModal

